<template>
  <div class="distributors-page">
    <div class="page-header">
      <h2 class="page-title">分销员管理</h2>
      <div class="header-actions">
        <select v-model="selectedStore" @change="handleStoreChange" class="filter-select">
          <option value="">全部门店</option>
          <option v-for="store in stores" :key="store.id" :value="store.id">
            {{ store.name }}
          </option>
        </select>
        <select v-model="selectedLevel" @change="handleFilterChange" class="filter-select">
          <option value="">全部等级</option>
          <option value="1">一级分销员</option>
          <option value="2">二级分销员</option>
          <option value="3">三级分销员</option>
        </select>
        <select v-model="selectedStatus" @change="handleFilterChange" class="filter-select">
          <option value="">全部状态</option>
          <option value="1">活跃</option>
          <option value="0">停用</option>
        </select>
        <button @click="refreshTree" class="action-btn primary">刷新</button>
      </div>
    </div>

    <!-- 统计概览 -->
    <div class="stats-overview">
      <div class="stat-card">
        <div class="stat-icon total-distributors">
          <svg viewBox="0 0 24 24">
            <path d="M16,4C16.88,4 17.67,4.5 18,5.26L20,9H20A2,2 0 0,1 22,11V15A2,2 0 0,1 20,17H19V19A2,2 0 0,1 17,21H15A2,2 0 0,1 13,19V17H11V19A2,2 0 0,1 9,21H7A2,2 0 0,1 5,19V17H4A2,2 0 0,1 2,15V11A2,2 0 0,1 4,9H4L6,5.26C6.33,4.5 7.12,4 8,4H16M8.5,6A0.5,0.5 0 0,0 8,6.5A0.5,0.5 0 0,0 8.5,7A0.5,0.5 0 0,0 9,6.5A0.5,0.5 0 0,0 8.5,6M15.5,6A0.5,0.5 0 0,0 15,6.5A0.5,0.5 0 0,0 15.5,7A0.5,0.5 0 0,0 16,6.5A0.5,0.5 0 0,0 15.5,6Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">{{ statistics.totalDistributors || 0 }}</h3>
          <p class="stat-label">总分销员</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon active-distributors">
          <svg viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">{{ statistics.activeDistributors || 0 }}</h3>
          <p class="stat-label">活跃分销员</p>
        </div>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 分销员树形结构 -->
      <div class="tree-panel">
        <div class="panel-header">
          <h3>分销员层级结构</h3>
          <div class="tree-tools">
            <button @click="expandAll" class="tool-btn">全部展开</button>
            <button @click="collapseAll" class="tool-btn">全部收起</button>
          </div>
        </div>
        
        <div class="tree-container" :class="{ 'loading': treeLoading }">
          <div v-if="distributorTree.length === 0 && !treeLoading" class="empty-tree">
            <div class="empty-icon">
              <svg viewBox="0 0 24 24">
                <path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"/>
              </svg>
            </div>
            <p>暂无分销员数据</p>
          </div>
          
          <div v-else class="tree-list">
            <DistributorTreeNode
              v-for="node in distributorTree"
              :key="node.distributorId"
              :node="node"
              :selected-id="selectedDistributorId"
              :expanded-nodes="expandedNodes"
              @node-click="handleNodeClick"
              @node-toggle="handleNodeToggle"
            />
          </div>
        </div>
      </div>

      <!-- 分销员详情面板 -->
      <div class="detail-panel" v-if="selectedDistributor">
        <div class="panel-header">
          <h3>分销员详情</h3>
          <button @click="selectedDistributor = null" class="close-btn">
            <svg viewBox="0 0 24 24">
              <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
            </svg>
          </button>
        </div>

        <div class="detail-content" :class="{ 'loading': detailLoading }">
          <!-- 基本信息 -->
          <div class="info-section">
            <h4>基本信息</h4>
            <div class="distributor-card">
              <div class="distributor-avatar">
                <img :src="selectedDistributor.avatar || '/default-avatar.png'" :alt="selectedDistributor.nickname">
              </div>
              <div class="distributor-info">
                <h3>{{ selectedDistributor.nickname }}</h3>
                <p class="distributor-code">{{ selectedDistributor.distributorCode }}</p>
                <div class="badges">
                  <span class="level-badge" :class="'level' + selectedDistributor.level">
                    {{ selectedDistributor.level }}级分销员
                  </span>
                  <span class="status-badge" :class="selectedDistributor.status === 1 ? 'active' : 'inactive'">
                    {{ selectedDistributor.status === 1 ? '活跃' : '停用' }}
                  </span>
                </div>
              </div>
            </div>
            
            <div class="info-grid">
              <div class="info-item">
                <label>门店</label>
                <span>{{ selectedDistributor.storeName }}</span>
              </div>
              <div class="info-item">
                <label>手机号</label>
                <span>{{ selectedDistributor.phone || '未设置' }}</span>
              </div>
              <div class="info-item">
                <label>上级分销员</label>
                <span>{{ selectedDistributor.parentName || '无' }}</span>
              </div>
              <div class="info-item">
                <label>激活时间</label>
                <span>{{ formatDate(selectedDistributor.activatedAt) }}</span>
              </div>
            </div>
          </div>

          <!-- 团队数据 -->
          <div class="info-section">
            <h4>团队数据</h4>
            <div class="team-stats">
              <div class="team-stat">
                <div class="stat-value">{{ selectedDistributor.directSubCount || 0 }}</div>
                <div class="stat-label">直接下级</div>
              </div>
              <div class="team-stat">
                <div class="stat-value">{{ selectedDistributor.totalSubCount || 0 }}</div>
                <div class="stat-label">团队总数</div>
              </div>
              <div class="team-stat">
                <div class="stat-value">{{ selectedDistributor.depth || 0 }}</div>
                <div class="stat-label">层级深度</div>
              </div>
            </div>
          </div>

          <!-- 佣金数据 -->
          <div class="info-section">
            <h4>佣金数据</h4>
            <div class="commission-stats">
              <div class="commission-item">
                <label>当前余额</label>
                <span class="amount">￥{{ formatCurrency(selectedDistributor.commissionBalance || 0) }}</span>
              </div>
              <div class="commission-item">
                <label>历史总佣金</label>
                <span class="amount">￥{{ formatCurrency(commissionDetail.totalCommission || 0) }}</span>
              </div>
              <div class="commission-item">
                <label>已提现金额</label>
                <span class="amount">￥{{ formatCurrency(commissionDetail.withdrawnCommission || 0) }}</span>
              </div>
            </div>
          </div>

          <!-- 最近佣金记录 -->
          <div class="info-section">
            <h4>最近佣金记录</h4>
            <div class="commission-records" v-if="commissionRecords.length > 0">
              <div v-for="record in commissionRecords" :key="record.id" class="commission-record">
                <div class="record-info">
                  <div class="record-main">
                    <span class="customer-name">{{ record.customerName }}</span>
                    <span class="order-amount">订单金额: ￥{{ formatCurrency(record.orderAmount) }}</span>
                  </div>
                  <div class="record-detail">
                    <span class="commission-rate">{{ (record.commissionRate * 100).toFixed(1) }}%</span>
                    <span class="record-time">{{ formatDate(record.createdAt) }}</span>
                  </div>
                </div>
                <div class="record-amount">
                  ￥{{ formatCurrency(record.commissionAmount) }}
                </div>
              </div>
            </div>
            <div v-else class="no-records">暂无佣金记录</div>
          </div>

          <!-- 操作按钮 -->
          <div class="action-section">
            <button @click="toggleDistributorStatus" class="action-btn" :class="selectedDistributor.status === 1 ? 'danger' : 'success'">
              {{ selectedDistributor.status === 1 ? '停用分销员' : '启用分销员' }}
            </button>
            <button @click="viewCommissionDetail" class="action-btn primary">查看详细佣金</button>
            <button @click="viewSubordinates" class="action-btn secondary">管理下级</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { getDistributorTree, getDistributorDetail, getDistributorCommissionDetails, updateDistributorStatus, getDistributorStatistics } from '@/api/distributor'
import { getActiveStores } from '@/api/store'
import { message } from '@/utils/message'

// 分销员树形节点组件
import DistributorTreeNode from '@/components/DistributorTreeNode.vue'

// 数据状态
const treeLoading = ref(false)
const detailLoading = ref(false)
const selectedStore = ref('')
const selectedLevel = ref('')
const selectedStatus = ref('')
const stores = ref([])
const distributorTree = ref([])
const expandedNodes = ref(new Set())
const selectedDistributorId = ref(null)
const selectedDistributor = ref(null)
const commissionDetail = ref({})
const commissionRecords = ref([])
const statistics = ref({})

// 页面初始化
onMounted(() => {
  loadStores()
  loadDistributorTree()
  loadStatistics()
})

// 加载门店列表
const loadStores = async () => {
  try {
    const response = await getActiveStores()
    stores.value = response.data || []
  } catch (error) {
    console.error('加载门店列表失败:', error)
  }
}

// 加载分销员树形结构
const loadDistributorTree = async () => {
  treeLoading.value = true
  try {
    const params = {}
    if (selectedStore.value) params.store_id = selectedStore.value
    if (selectedLevel.value) params.level = selectedLevel.value
    if (selectedStatus.value) params.status = selectedStatus.value
    
    const response = await getDistributorTree(params)
    distributorTree.value = response.data || []
  } catch (error) {
    console.error('加载分销员树失败:', error)
    message.error('加载分销员数据失败')
  } finally {
    treeLoading.value = false
  }
}

// 加载统计信息
const loadStatistics = async () => {
  try {
    const params = {}
    if (selectedStore.value) params.store_id = selectedStore.value
    if (selectedLevel.value) params.level = selectedLevel.value
    if (selectedStatus.value) params.status = selectedStatus.value
    
    const response = await getDistributorStatistics(params)
    statistics.value = response.data || {}
  } catch (error) {
    console.error('加载统计信息失败:', error)
  }
}

// 门店切换
const handleStoreChange = () => {
  loadDistributorTree()
  loadStatistics()
  selectedDistributor.value = null
  selectedDistributorId.value = null
}

// 筛选条件变更处理
const handleFilterChange = () => {
  loadDistributorTree()
  loadStatistics()
  selectedDistributor.value = null
  selectedDistributorId.value = null
}

// 刷新树形结构
const refreshTree = () => {
  loadDistributorTree()
  loadStatistics()
}

// 展开所有节点
const expandAll = () => {
  const getAllNodeIds = (nodes) => {
    let ids = []
    nodes.forEach(node => {
      ids.push(node.distributorId)
      if (node.children && node.children.length > 0) {
        ids = ids.concat(getAllNodeIds(node.children))
      }
    })
    return ids
  }
  expandedNodes.value = new Set(getAllNodeIds(distributorTree.value))
}

// 收起所有节点
const collapseAll = () => {
  expandedNodes.value.clear()
}

// 节点点击处理
const handleNodeClick = async (node) => {
  // 参数验证
  if (!node || !node.distributorId) {
    console.warn('节点数据无效:', node)
    message.error('节点数据无效')
    return
  }
  
  if (selectedDistributorId.value === node.distributorId) return
  
  console.log('点击节点:', node.distributorId, node.nickname)
  selectedDistributorId.value = node.distributorId
  await loadDistributorDetail(node.distributorId)
}

// 节点展开/收起处理
const handleNodeToggle = (nodeId) => {
  if (!nodeId || nodeId === 'undefined' || nodeId === null) {
    console.warn('节点ID无效:', nodeId)
    return
  }
  
  if (expandedNodes.value.has(nodeId)) {
    expandedNodes.value.delete(nodeId)
  } else {
    expandedNodes.value.add(nodeId)
  }
}

// 加载分销员详情
const loadDistributorDetail = async (distributorId) => {
  // 参数验证
  if (!distributorId || distributorId === 'undefined' || distributorId === null) {
    console.warn('分销员ID无效:', distributorId)
    message.error('分销员ID无效')
    return
  }
  
  detailLoading.value = true
  try {
    console.log('加载分销员详情:', distributorId)
    
    // 加载基本信息
    const detailResponse = await getDistributorDetail(distributorId)
    selectedDistributor.value = detailResponse.data

    // 加载佣金明细
    const commissionResponse = await getDistributorCommissionDetails(distributorId, { page: 1, size: 5 })
    commissionDetail.value = commissionResponse.data.commissionSummary || {}
    commissionRecords.value = commissionResponse.data.commissionRecords || []
  } catch (error) {
    console.error('加载分销员详情失败:', error)
    message.error('加载分销员详情失败')
    // 清空选中状态
    selectedDistributor.value = null
    selectedDistributorId.value = null
  } finally {
    detailLoading.value = false
  }
}

// 切换分销员状态
const toggleDistributorStatus = async () => {
  if (!selectedDistributor.value) return
  
  const newStatus = selectedDistributor.value.status === 1 ? 0 : 1
  const actionText = newStatus === 1 ? '启用' : '停用'
  
  try {
    await updateDistributorStatus(selectedDistributor.value.distributorId, newStatus)
    selectedDistributor.value.status = newStatus
    message.success(`${actionText}分销员成功`)
    // 刷新树形结构
    await loadDistributorTree()
  } catch (error) {
    console.error(`${actionText}分销员失败:`, error)
    message.error(`${actionText}分销员失败`)
  }
}

// 查看佣金详情
const viewCommissionDetail = () => {
  // TODO: 打开佣金详情弹窗或跳转到详情页面
  console.log('查看佣金详情', selectedDistributor.value.distributorId)
}

// 查看下级管理
const viewSubordinates = () => {
  // TODO: 打开下级管理弹窗或跳转到管理页面
  console.log('管理下级', selectedDistributor.value.distributorId)
}

// 工具函数
const formatCurrency = (amount) => {
  return Number(amount).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

const formatDate = (dateString) => {
  if (!dateString) return '未知'
  return new Date(dateString).toLocaleString('zh-CN')
}
</script>

<style scoped>
.distributors-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
  color: #2d3748;
}

.header-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.filter-select {
  padding: 10px 15px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
  background: white;
}

.filter-select:focus {
  border-color: #667eea;
}

/* 统计概览 */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 28px;
  height: 28px;
  fill: white;
}

.stat-icon.total-distributors {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.stat-icon.active-distributors {
  background: linear-gradient(135deg, #10b981, #059669);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: #1a202c;
}

.stat-label {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
}

/* 主体内容 */
.main-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 30px;
  min-height: 600px;
}

.tree-panel, .detail-panel {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.panel-header {
  padding: 20px 25px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3748;
}

.tree-tools {
  display: flex;
  gap: 10px;
}

.tool-btn {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
}

.tool-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e0;
}

.close-btn {
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  color: #64748b;
  transition: all 0.2s;
}

.close-btn:hover {
  background: #f8fafc;
  color: #2d3748;
}

.close-btn svg {
  width: 16px;
  height: 16px;
}

/* 树形容器 */
.tree-container {
  padding: 20px 25px;
  max-height: 600px;
  overflow-y: auto;
  position: relative;
}

.tree-container.loading::before {
  content: '加载中...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: #64748b;
  font-size: 0.9rem;
}

.tree-container.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9;
}

.empty-tree {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
}

.empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  opacity: 0.5;
}

.empty-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.tree-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 详情面板 */
.detail-content {
  padding: 25px;
  position: relative;
}

.detail-content.loading::before {
  content: '加载中...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: #64748b;
  font-size: 0.9rem;
}

.detail-content.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9;
}

.info-section {
  margin-bottom: 30px;
}

.info-section h4 {
  margin: 0 0 20px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.distributor-card {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
}

.distributor-avatar {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.distributor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.distributor-info h3 {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3748;
}

.distributor-code {
  margin: 0 0 10px 0;
  font-size: 0.9rem;
  color: #64748b;
  font-family: monospace;
}

.badges {
  display: flex;
  gap: 8px;
}

.level-badge, .status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.level-badge.level1 {
  background: #fef3c7;
  color: #92400e;
}

.level-badge.level2 {
  background: #e0e7ff;
  color: #5b21b6;
}

.level-badge.level3 {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.active {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.inactive {
  background: #fee2e2;
  color: #991b1b;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-item label {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}

.info-item span {
  font-size: 0.9rem;
  color: #2d3748;
}

.team-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.team-stat {
  text-align: center;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.8rem;
  color: #64748b;
}

.commission-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.commission-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.commission-item:last-child {
  border-bottom: none;
}

.commission-item label {
  font-size: 0.9rem;
  color: #64748b;
}

.commission-item .amount {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
}

.commission-records {
  max-height: 200px;
  overflow-y: auto;
}

.commission-record {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.commission-record:last-child {
  border-bottom: none;
}

.record-info {
  flex: 1;
}

.record-main {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}

.customer-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #2d3748;
}

.order-amount {
  font-size: 0.8rem;
  color: #64748b;
}

.record-detail {
  display: flex;
  gap: 10px;
  font-size: 0.8rem;
  color: #64748b;
}

.commission-rate {
  color: #059669;
  font-weight: 500;
}

.record-amount {
  font-size: 1rem;
  font-weight: 600;
  color: #059669;
}

.no-records {
  text-align: center;
  padding: 20px;
  color: #64748b;
  font-size: 0.9rem;
}

.action-section {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.action-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.action-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.action-btn.secondary {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.action-btn.secondary:hover {
  background: #f1f5f9;
  color: #2d3748;
}

.action-btn.success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.action-btn.success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.action-btn.danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.action-btn.danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .detail-panel {
    order: -1;
  }
}

@media (max-width: 768px) {
  .stats-overview {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .team-stats {
    grid-template-columns: 1fr;
  }
  
  .action-section {
    flex-direction: column;
  }
}
</style> 